<template>
	<ul class="businessfooter">
		<li @click="toBusinessOrder">
			<i class="fa fa-file-text-o"></i>
			<p>订单管理</p>
		</li>
		
		<li @click="toBusinessManage"> <!-- 添加点击事件 -->
			<i class="fa fa-user-o"></i>
			<p>商家管理</p>
		</li>

		<li @click="toBusinessProfile"> <!-- 添加点击事件 -->
			<i class="fa fa-gears"></i>
			<p>商家信息管理</p>
		</li>
		<li @click="toMenuManage"> <!-- 添加点击事件 -->
			<i class="fa fa-bars"></i>
			<p>菜单管理</p>
		</li>

	</ul>
</template>

<script>
	export default{
		name:'BusinessFooter',
		methods:{
			toBusinessOrder(){
				this.$router.push({path:'/businessorder'});
			},
			toBusinessManage() { // 新增的“我的”页面跳转方法
				this.$router.push({ path: '/businessmanage' });  // 根据实际的路由路径进行调整
			},
			toBusinessProfile() { // 新增的“我的”页面跳转方法
				this.$router.push({ path: '/businessprofile' });  // 根据实际的路由路径进行调整
			},
			toMenuManage()
			{
				this.$router.push({ path: '/menumanage' });  // 根据实际的路由路径进行调整
			}
		}
	}
</script>

<style>
	.wrapper .businessfooter {
		width: 100%;
		height: 14vw;
		border-top: solid 1px #DDD;
		background-color: #fff;

		position: fixed;
		left: 0;
		bottom: 0;

		display: flex;
		justify-content: space-around;
		align-items: center;
		
		
		
	}

	.wrapper .businessfooter li {
		/*li本身的尺寸完全由内容撑起*/
		 flex-grow: 1; /* 使每个 li 元素占据相同的宽度 */
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;

		color: #999;
		user-select: none;
		cursor: pointer;
		
	}

	.wrapper .businessfooter li p {
		font-size: 2.8vw;
	
	}

	.wrapper .businessfooter li i {
		font-size: 5vw;
		
	}
</style>
